<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
</head>
<style type="text/css">
.active {
    background-color: #f4f4f4;
}
</style>
<body>
    <div class="aui-content">
        <ul class="aui-list-view">
            <li class="aui-list-view-cell" tapmode="active" onclick="openWin('waterfall')">
                <a class="aui-arrow-right">瀑布流<span class="aui-badge aui-badge-danger">new</span></a>
            </li>
            <li class="aui-list-view-cell" tapmode="active" onclick="openWin('button')">
                <a class="aui-arrow-right">按钮</a>
            </li>
            <li class="aui-list-view-cell" tapmode="active" onclick="openWin('form')">
                <a class="aui-arrow-right">表单</a>
            </li>
            <li class="aui-list-view-cell" tapmode="active" onclick="openWin('switch')">
                <a class="aui-arrow-right">switch开关</a>
            </li>
            <li class="aui-list-view-cell" tapmode="active" onclick="openWin('checkbox')">
                <a class="aui-arrow-right">checkbox选择</a>
            </li>
            <li class="aui-list-view-cell" tapmode="active" onclick="openWin('radio')">
                <a class="aui-arrow-right">radio选择</a>
            </li>
            <li class="aui-list-view-cell" tapmode="active" onclick="openWin('list')">
                <a class="aui-arrow-right">普通列表</a>
            </li>
            <li class="aui-list-view-cell" tapmode="active" onclick="openWin('list_arrow')">
                <a class="aui-arrow-right">带有角标和箭头的列表</a>
            </li>
            <li class="aui-list-view-cell" tapmode="active" onclick="openWin('list_thumb')">
                <a class="aui-arrow-right">缩略图列表</a>
            </li>
            <li class="aui-list-view-cell" tapmode="active" onclick="openWin('list_counter')">
                <a class="aui-arrow-right">计数列表(购物车类样式疯狂拼合)</a>
            </li>
            <li class="aui-list-view-cell" tapmode="active" onclick="openWin('list_image')">
                <a class="aui-arrow-right">图片列表布局</a>
            </li>
            <li class="aui-list-view-cell" tapmode="active" onclick="openWin('header_bar')">
                <a class="aui-arrow-right">导航栏<span class="aui-badge aui-badge-warning">优化</span></a>
            </li>
            <li class="aui-list-view-cell" tapmode="active" onclick="openWin('footer_tab')">
                <a class="aui-arrow-right">底部工具栏<span class="aui-badge aui-badge-warning">优化</span></a>
            </li>
            <li class="aui-list-view-cell" tapmode="active" onclick="openWin('list_nine')">
                <a class="aui-arrow-right">九宫格</a>
            </li>
            <li class="aui-list-view-cell" tapmode="active" onclick="openWin('list_sixteen')">
                <a class="aui-arrow-right">十六宫格</a>
            </li>
            <li class="aui-list-view-cell" tapmode="active" onclick="openWin('loading')">
                <a class="aui-arrow-right">个性loading</a>
            </li>
            <li class="aui-list-view-cell" tapmode="active" onclick="openWin('tab')">
                <a class="aui-arrow-right">TAB菜单</a>
            </li>
            <li class="aui-list-view-cell" tapmode="active" onclick="openWin('contact_book')" data-win="contact_book">
                <a class="aui-arrow-right">通讯录</a>
            </li>
            <li class="aui-list-view-cell" tapmode="active" onclick="openWin('chat')">
                <a class="aui-arrow-right">聊天界面</a>
            </li>
            <li class="aui-list-view-cell" tapmode="active" onclick="openWin('iconfont')">
                <a class="aui-arrow-right">图标</a>
            </li>
            <li class="aui-list-view-cell" tapmode="active" onclick="openWin('demo_form')">
                <a class="aui-arrow-right">案例：表单样式</a>
            </li>
            <li class="aui-list-view-cell" tapmode="active" onclick="openWin('demo_qinghuwai')">
                <a class="aui-arrow-right">案例：仿轻户外动态列表效果</a>
            </li>
            <li class="aui-list-view-cell" tapmode="active" onclick="openWin('demo_list')">
                <a class="aui-arrow-right">案例：仿华为花粉俱乐部首页</a>
            </li>
            <li class="aui-list-view-cell" tapmode="active" onclick="openWin('contact_book')">
                <a class="aui-arrow-right">案例：联系人效果</a>
            </li>
            <li class="aui-list-view-cell" tapmode="active" onclick="openWin('my')">
                <a class="aui-arrow-right">案例：会员中心效果</a>
            </li>
            
        </ul>
    </div>
</body>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript">
    apiready = function () {
        api.parseTapmode();
    }
    function openWin(name){
        api.openWin({
            name: ''+name+'',
            url: ''+name+'_win.html',
            bounces:false,
            delay: 300
        });
    }
</script>
</html>